// src/pages/article/widgets/comment/index.tsx
import styles from "@pages/article/styles/styles.module.less";
import GeekIcon from "@shared/geekIcon";
import dayjs from "dayjs";
import Slide, { SlideRef } from "@shared/slide";
import ReplyList from "@pages/article/widgets/replyList";
import { useRef } from "react";
interface Props {
  comment: ArticleComment;
  resetComments(): void;
}

export default function Comment({ comment,resetComments }: Props) {
  const slideRef = useRef<null | SlideRef>(null);
  return (
    <div className={styles.item}>
      <div className={styles.commentator}>
        <div className={styles.avatar}>
          <img src={comment.aut_photo} alt="" />
          <span>{comment.aut_name}</span>
        </div>
        <div className={styles.like}>
          <span>{comment.like_count}</span>
          <GeekIcon type={"iconbtn_like"} />
        </div>
      </div>
      <div className={styles.discuss}>{comment.content}</div>
      <div className={styles.bottom}>
        <div className={styles.reply}>
          <button onClick={()=>slideRef.current?.open()}>{comment.reply_count}&nbsp;回复&nbsp;&gt;</button>
          <span>{dayjs().to(dayjs(comment.pubdate))}</span>
        </div>
        <GeekIcon type={"iconbtn_essay_close"} className={styles.close} />
      </div>
      <Slide direction={"toLeft"} ref={slideRef}>
        <ReplyList comment={comment} slideRef={slideRef} resetComments={resetComments} />
      </Slide>
    </div>
  );
}